<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">注册用户</div>
            <el-form :model="param" :rules="rules" ref="register" label-width="0px" class="ms-content">
                <el-form-item prop="userName">
                    <el-input v-model="param.userName" placeholder="用户名">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="userPass">
                    <el-input
                            type="password"
                            placeholder="密码"
                            v-model="param.userPass"
                            @keyup.enter.native="register()"
                    >
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="userPhone">
                    <el-input v-model="param.userPhone" placeholder="电话号码">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                
				<div class="login-btn">
                    <el-button type="primary" @click="register()">注册</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                param: {
                    userName: '',
                    userPass: '',
                    userPhone:'',
                    userStatusId:'0'  
                },
                rules: {
                    userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    userPass: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    userPhone:[{required: true, message: '请输入电话号码', trigger: 'blur'},{ min: 11, max: 11, message: '长度为11位', trigger: 'blur'}],                   
                },
            };
        },
        methods: {
            /*注册方法*/
            register(){
            	/*跳转到注册路由*/
            	/*表单验证 是否输入用户名和密码*/
                this.$refs.register.validate(valid => {
                	console.log("注册进入");
                    if (valid) {
                    	this.$axios.post("/user/register",this.param).then(resp => {
                    		console.log(resp);
                    		if(resp.data.code != 500){
                        		this.$message.success('注册成功');
		                        /*然后跳转到 登陆*/
		                        this.$router.push('/login');
                    		}else{
                    			/*输出 登陆成功提示*/
                        		this.$message.success('账户已存在');
                    		}
                    	});
                    } else {
                    	/*提示输入 用户名和密码电话*/
                        this.$message.error('请输入注册信息');
                        return false;
                    }
                });
            }
            

        },
    };
</script>

<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/login-bg.jpg);
        background-size: 100%;
    }

    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }

    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }

    .ms-content {
        padding: 30px 30px;
    }

    .login-btn {
        text-align: center;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }

    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
</style>